<!DOCTYPE html>
<html>

	<head>
		<title>我的消息</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap/js/bootstrap.bundle.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/message.css" />
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<script>
			$(function () {
				//查询当前用户的点赞数
                var user = JSON.parse(sessionStorage.getItem("user"));

                $.get("/users/"+user.id+"/greatNum",function (data) {
                    //消息大于0才显示,0就不显示
					if(data>0){
					    $("#great").html(data);
					}
                })
				//点赞信息的回显
				$(".great").click(function () {

                    if ($(".greatContent").css("display")=="none"){
                        $(".greatContent").css("display","block")
                    }

                    $.get("/users/"+user.id+"/greatMessage",function (data) {
                        console.log(data);
                        if (data.length>0){
							$(".greatContent").renderValues({list:data},{
								setHref: function (item, value) {
									var href = $(item).data("href"); //得到href
									$(item).attr("href", href + value);//手动拼接跳转的url
								},
								title:function (item, value) {
								   $(item).html(value)
								},
								nickName:function (item, value) {
									$(item).html(value)
								}
							})
                        }else {
                            $("#greatMgr").html("暂无消息~~~")
                        }
						$("#great").remove();
                    })
                })

				//查询评论数
                $.get("/users/"+user.id+"/commentNum",function (data) {
                    //消息大于0才显示,0就不显示
                    if(data>0){
                        $("#comment").html(data);
                    }
                })
                //评论消息的回显
                $(".comment").click(function () {

                    if ($(".commentContent").css("display")=="none"){
                        $(".commentContent").css("display","block")
                    }

                    $.get("/users/"+user.id+"/comments",function (data) {
                        if (data.length>0){
                            $(".commentContent").renderValues({list:data},{
                                setHref: function (item, value) {
                                    var href = $(item).data("href"); //得到href
                                    $(item).attr("href", href + value);//手动拼接跳转的url
                                },
                                title:function (item, value) {
                                    $(item).html(value)
                                },
                                nickName:function (item, value) {
                                    $(item).html(value)
                                }
                            })
                        }else {
                            $("#commentMgr").html("暂无消息~~~")
                        }
                        $("#comment").remove();
                    })
                })

                //查询系统通知数
                $.get("/users/"+user.id+"/systemNum",function (data) {
                    //消息大于0才显示,0就不显示
                    if(data>0){
                        $("#system").html(data);
                    }
                })
                //系统消息的回显
                $(".system").click(function () {

                    if ($(".systemContent").css("display")=="none"){
                        $(".systemContent").css("display","block")
                    }

                    $.get("/users/"+user.id+"/systems",function (data) {
                        if (data.length>0){
                            $(".systemContent").renderValues({list:data},{
                                setHref: function (item, value) {
                                    var href = $(item).data("href"); //得到href
                                    $(item).attr("href", href + value);//手动拼接跳转的url
                                },
                                title:function (item, value) {
                                    $(item).html(value)
                                }
                            })
                        }else {
                            $("#systemMgr").html("暂无消息~~~")
                        }
                        $("#system").remove();
                    })
                })
                //查询未读的私信数量
                $.get("/users/"+user.id+"/privateNum",function (data) {
                    //消息大于0才显示,0就不显示
                    console.log(data);
                    if(data>0){
                        $("#privateNum").html(data);
                    }
                })

                //跳转私信页面
                $("#privateHref").attr("href", $("#privateHref").data("href")+ user.id);

				//----------------------------------------------------------------
                //查询未读的艾特数量
                $.get("/users/"+user.id+"/aiteNum",function (data) {
                    //消息大于0才显示,0就不显示
                    if(data>0){
                        $("#aiteNum").html(data);
                    }
                })
                //艾特消息的回显
                $(".aite").click(function () {

                    if ($(".aiteContent").css("display")=="none"){
                        $(".aiteContent").css("display","block")
                    }
                    $.get("/users/"+user.id+"/aites",function (data) {
                        console.log(data);
                        if (data.length>0){
                            $(".aiteContent").renderValues({list:data},{
                                setHref: function (item, value) {
                                    var href = $(item).data("href"); //得到href
                                    $(item).attr("href", href + value);//手动拼接跳转的url
                                }
                            })
                        }else {
                            $("#aiteMgr").html("暂无消息~~~")
                        }
                        $("#aiteNum").remove();
                    })
                })
            })
		</script>

        <style>
            a:link{		/*默认状态*/
                color: black;
            }
            a:visited{	/*浏览过的*/
                color:darkgrey;
            }
            a:hover{	/*悬浮状态*/
                color:darkgrey;
            }
            a:active{	/*激活过的*/
                color: red;
            }
        </style>
	</head>
	<body>
		<div class="search-head">
			<div class="row nav-search">
				<div class="col">
					<a href="javascript:history.go(-1);">
						<span><i class="fa fa-chevron-left" ></i></span>
					</a>
				</div>
				<div class="col">
					<span>我的消息</span>
				</div>
				<div class="col"></div>
			</div>
		</div>

		<ul class="list-group">
			<!--赞通知-->
			<a href="javascript:;"  data-toggle="collapse" id="greatBtn" data-target="#greatMgr">
				<li class="list-group-item d-flex justify-content-between align-items-center great">
					<div class="item">
						<span><i class="fa fa-thumbs-o-up" ></i></span>
						<span>赞</span>
						<span class="badge badge-danger badge-pill" id="great"></span>
					</div>
					<i class="fa fa-chevron-right"></i>
				</li>
			</a>

			<div class="greatContent" style="display: none">
				<dl class="itemList" render-loop="list" id="greatMgr" >
					<dd>
						<a data-href="/friend/profiles.html?id=" render-fun="setHref" render-key="list.u_id">
							<span style="text-decoration:underline;color: #4cabff" render-fun="nickName" render-key="list.u_nickName"></span>
                            <span style="color: #c7bfbb">在~</span>
                        </a>
						<a data-href="/travelContent.html?id=" render-fun="setHref" render-key="list.t_id">
						<span style="text-decoration:underline;color: #4cabff" render-fun="title" render-key="list.t_title"></span>
                            <span style="color: #c7bfbb">游记---中赞了我</span>
                        </a>
						<p render-html="list.greatTime"></p>
 					</dd>
				</dl>
			</div>
			<!--艾特我-->
			<a href="javascript:;"  data-toggle="collapse" data-target="#aiteMgr">
				<li class="list-group-item d-flex justify-content-between align-items-center aite">
					<div class="item">
						<span><i class="fa fa-at" ></i></span>
						<span>@我的</span>
						<span class="badge badge-danger badge-pill" id="aiteNum"></span>
					</div>
					<i class="fa fa-chevron-right"></i>
				</li>
			</a>
			<div class="aiteContent" style="display: none">
				<dl class="itemList" render-loop="list" id="aiteMgr" >
					<dd>
                        <P>
                            <span style="color: #732D2D">您的好友:</span>
                            <a data-href="/friend/profiles.html?id=" render-fun="setHref" render-key="list.u_id">
                                <img class="rounded-circle" render-src="list.u_headImgUrl" width="30px">
                                <span style="text-decoration:underline;color: #4cabff" render-html="list.u_nickName"></span></a>
                            <a data-href="/travelContent.html?id=" render-fun="setHref" render-key="list.t_id">
                                <span>在:</span>
                                <span style="color: #4cabff;text-decoration:underline" render-html="list.t_title"></span>
                                <span style="color: darkgrey">~~文章中@了我</span>
                            </a>
                        </P>
                        <p render-html="list.createtime"></p>
					</dd>
				</dl>
			</div>

			<!--评论通知-->
			<a href="javascript:;" data-toggle="collapse" data-target="#commentMgr">
				<li class="list-group-item d-flex justify-content-between align-items-center comment">
					<div class="item">
						<span><i class="fa fa-commenting-o" ></i></span>
						<span>评论</span>
						<span class="badge badge-danger badge-pill" id="comment"></span>
					</div>
					<i class="fa fa-chevron-right"></i>
				</li>
			</a>
            <div class="commentContent" style="display:none">
                <dl class="itemList" render-loop="list" id="commentMgr" >
                    <dd>
                        <P>
							<a data-href="/friend/profiles.html?id=" render-fun="setHref" render-key="list.u_id">
                            <img class="rounded-circle" render-src="list.u_headImgUrl" width="30px">
                            <span style="text-decoration:underline;color: #4cabff" render-fun="nickName" render-key="list.u_nickName"></span>
                                <span style="color: #c7bfbb">在~</span>
                            </a>
                        	<a data-href="/travelContent.html?id=" render-fun="setHref" render-key="list.t_id">
                            <span style="text-decoration:underline;color: #4cabff" render-fun="title" render-key="list.t_title"></span>
                                <span style="color: #c7bfbb">游记---中评论了我</span>
                            </a>
						</P>
                        <p render-html="list.updatetime"></p>
                    </dd>
                </dl>
            </div>
            <!--私信-->
            <a style="color: #1b1e21" data-href="/friend/interface/messagePage.html?id=" id="privateHref">
                <li class="list-group-item d-flex justify-content-between align-items-center">
                   <div class="item">
                    <span><i class="fa fa-envelope-o" ></i></span>
                    <span>私信</span>
                    <span class="badge badge-danger badge-pill" id="privateNum"></span>
                        </div>
                    <i class="fa fa-chevron-right"></i>
                </div>
                </li>
            </a>

			<!--系统通知-->
			<a href="javesrcipt:;" data-toggle="collapse" data-target="#systemMgr">
				<li class="list-group-item d-flex justify-content-between align-items-center system">
					<div class="item">
						<span><i class="fa fa-bell" ></i></span>
						<span>系统通知</span>
						<span class="badge badge-danger badge-pill" id="system"></span>
					</div>
					<i class="fa fa-chevron-right"></i>
				</li>
			</a>
			<div class="systemContent" style="display:none">
				<dl class="itemList" render-loop="list" id="systemMgr" >
					<dd>
						<P>
							<span style="color: #732D2D">尊敬的用户您好:</span><br>
							<span style="color: #732D2D;">您的文章:</span>
							<a data-href="/travelContent.html?id=" render-fun="setHref" render-key="list.t_id">
								<span style="text-decoration:underline;color: #4cabff" render-fun="title" render-key="list.t_title"></span></a>
							<span  render-html="list.content"></span>
						</P>
						<p render-html="list.creatdate"></p>
					</dd>
				</dl>
			</div>
		</ul>
		
			<<!--div class="container systemMsg">
					<dl class="itemList">
						<dd>
							<p>如果你无法简洁的表达你的想法，那只说明你还不够了解它。</p> 
							<p>&#45;&#45; 阿尔伯特·爱因斯坦</p>
							<p>32分钟前</p>
						</dd>
					</dl>
			</div>-->
	</body>

</html>